<template>
    <div-row :obj="obj" class="content-wrapper text-picture">
        <div class="banner" :style="{height: obj.height}">
            <div class="banner-bg" :style="{height: obj.height,backgroundImage: `url(${obj.image})`}"/>
            <div class="banner-modal" :style="{height: obj.height}"/>
            <div class="banner-main">
                <div class="content-box col-text">
                    <h1 class="text-title" :class="obj.animateTitle? 'wow '+obj.animateTitle : ''" v-html="obj.title"/>
                    <p class="text-desc" :class="obj.animateText? 'wow '+obj.animateText : ''" v-html="obj.smTitle"/>
                    <div class="button-box" :class="obj.animateButton? 'wow '+obj.animateButton : ''">
                        <el-button @click="goClick" type="primary">
                            {{ obj.button }}
                        </el-button>
                    </div>
                </div>
            </div>
        </div>

    </div-row>
</template>
<script>
import animate from '@/mixins/animate'
export default {
    name: 'Banner',
    mixins: [animate],
    props: {
        obj: {
            type: Object
        }
    },
    methods: {
        goClick() {
            if (this.obj.url) {
                window.open(this.obj.url)
            }
        }
    }

}
</script>
<style lang="scss" scoped>
@keyframes scrollBanner {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}
@-webkit-keyframes scrollBanner {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}
@-ms-keyframes scrollBanner {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}
@-moz-keyframes scrollBanner {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

.banner {
    width: 100%;
    height: 500px;
    overflow: hidden;
    position: relative;
    .banner-modal{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        background-color: rgba(0,0,0,0.5);
    }
    .banner-bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 500px;
        background-image: url('https://img4.ifchange.com/static/prod/img/img/tob/account/login/banner1.edb92d5.jpg');
        -webkit-animation: scrollBanner 20s ease 1 forwards;
        animation: scrollBanner 20s ease 1 forwards;
        background-size: 100% auto;
        opacity: .7;
        transform: scale(1.2);
        transition: all .7s ease;
    }
    .banner-main {
        position: absolute;
        left:50%;
        top:50%;
        width: 80%;
        transform: translate(-50%,-50%);
        text-align: center;

        .text-title{
            margin-bottom: 50px;
            font-size: 60px;
            letter-spacing: 10px;
            color:#fff;
        }
        .text-desc{
            width: 90%;
            margin: 0 auto;
            font-size: 25px;
            line-height: 40px;
            letter-spacing: 5px;
            color:#fff;
        }
        .button-box{
            margin-top: 40px;
            .ml20{
                margin-left: 50px;
            }
        }
    }
 }

</style>

